<template>
	<view class="food_bg">
		<view class="loading_err" v-if="!isGetData">加载失败，请稍后再试</view>
		<view class="loading_success" v-if="isGetData">
			<!-- 菜名 -->
			<view class="food_title">
				{{food.name}}
			</view>
			<!-- 成品图片 -->
			<view class="food_res_image" @click="preImage(food.image)">
				<image :src="food.image" mode=""></image>
			</view>
			<!-- 评分和人数 -->
			<view class="scord_people">
				<text class="food_font">{{food.score}}</text><text class="score_people_font">综合评分</text>
				<text class="food_font">{{food.peopleCount}}</text><text class="score_people_font">人做过这道菜</text>
			</view>
			<!-- 用料 -->
			<view class="materials">
				<view class="materials_font">用料</view>
				<view class="materials_cailiao">
					<view class="materials_item" v-for="(item,index) in food.materials" :key="index">
						<text class="material_name">{{item.name}}</text>
						<text class="material_count">{{item.count}}</text>
					</view>
				</view>
			</view>
			<!-- 制作步骤 -->
			<view class="food_steps">
				<view class="materials_font">制作步骤</view>
				<view class="food_steps_main">
					<view class="food_step_per" v-for="(item,index) in food.steps" :key="index">
						<view class="food_step_text">
							<text class="food_step_sort">{{item.step}}</text>
							{{item.text}}
						</view>
						<view class="food_step_image">
							<image :src="item.image" mode="" @click="preImage(item.image)"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 小贴士 -->
			<view class="tips" v-if="food.tips.length > 0">
				<view class="tip_title">小贴士</view>
				<view class="tip_content" v-for="(item,index) in food.tips" :key="index">{{item}}</view>
				<view style="width: 100%;height: 30px;"></view>
			</view>
			<view style="width: 100%;height: 50px;"></view>
		</view>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../api/request.js'
	import {
		foods
	} from '../../datas/foods.js';
	export default {
		data() {
			return {
				food: {}, // 保存着这道食物制造过程
				isGetData: false, // 是否得到了数据
			}
		},
		onLoad(option) {
			const _this = this;
			uni.showLoading({
				title: '正在加载...',
				mask: true,
			})
			var isExistArray = false;
			foods.forEach((item) => {
				if (option.name == item.name) {
					this.food = item;
					isExistArray = true;
					_this.isGetData = true;
					uni.hideLoading();
				}
			})
			// 如果不在数组里，就请求后端搜索
			if (!isExistArray) {
				uni.request({
					url: `${baseUrl}/search/getFoodSteps?searchKey=${option.name}`,
					method: 'GET',
					timeout: 6000,
					success(res) {
						if (res.data.code == 10000) {
							_this.food = res.data.data
							_this.isGetData = true
							uni.hideLoading();
						} else {
							_this.isGetData = false
							uni.hideLoading();
						}
					},
					fail() {
						_this.isGetData = false
						uni.showToast({
							title: '加载失败！',
							duration:1000
						})
						setTimeout(()=>{
							uni.hideToast();
						},1000)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					},
				})
			}
			setTimeout(() => {
				uni.hideToast();
			}, 1000)
		},
		methods: {
			// 点击图片预览
			preImage(url) {
				const urls = [
					url
				]
				uni.previewImage({
					urls: urls,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.food_bg {
		min-height: 100vh;
		background-color: #fffae8;
		width: 100%;
		padding: 10px;
	}

	.food_title {
		font-size: 26px;
		font-family: 'STXingkai';
	}

	.food_res_image {
		width: 95%;
		margin: auto;
	}

	.food_res_image>image {
		width: 95%;
		height: 250px;
	}

	.food_font {
		font-size: 18px;
		color: red;
	}

	.scord_people {
		margin-top: 10px;
	}

	.score_people_font {
		color: #b3b3b3;
		margin-left: 8px;
		margin-right: 8px;
	}

	.materials {
		margin-top: 20px;
	}

	.materials_font {
		font-size: 26px;
		font-family: 'STXingkai';
		color: #c0ae7d;
		// text-align: center;
	}

	.materials_cailiao {
		margin-top: 10px;
	}

	.materials_item {
		width: 90%;
		height: 30px;
		border-bottom: 1px solid #e3e3e3;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.food_steps {
		margin-top: 40px;
	}

	.food_steps_main {
		margin-top: 10px;
	}

	.food_step_per {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.food_step_sort {
		margin-right: 10px;
		font-size: 20px;
		color: #c0ae7d;
	}
	
	.food_step_image{
		margin-top: 10px;
	}

	.food_step_image>image {
		width: 95%;
	}

	.food_step_text {
		width: 95%;
		font-size: 16px;
		color: #6b6b6b;
		letter-spacing: 3px;
	}

	.tips {
		width: 95%;
		min-height: 200px;
		background-color: #f5f6f5;
		margin-top: 20px;
	}

	.tip_title {
		font-size: 18px;
		font-weight: 600;
		width: 90%;
		margin-left: 20px;
	}

	.tip_content {
		width: 90%;
		margin: auto;
		letter-spacing: 2px;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
		word-break: break-all;
	}
	.loading_err{
		font-size: 20px;
		color: #ff5500;
		width: 90%;
		text-align: center;
		height: 100px;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
	}
	.material_name{
		width: 70%;
		text-align: left;
	}
	.material_count{
		width: 30%;
		text-align: right;
	}
</style>
